import React, { useEffect } from "react";
import "./Login.less";
import NavBarAgain from "../../components/NavBarAgain";
import { Form, Input, Button } from "antd-mobile";
import { getPhoneCode } from "../../http/api";
const Login = function Login() {
  // 创建form实例
  const [formIns] = Form.useForm();
  // 点击按钮发送验证码
  // useEffect(() => {
  const sendPhoneCode = async () => {
    const res = await getPhoneCode();
    console.log('res',res)
  };
  sendPhoneCode();
  // },[]);

  // 点击提交按钮进行表单验证
  const submit = () => {
    formIns.validateFields(async (errors, value) => {
      console.log("errors", errors);
      console.log("value", value);
    });
  };
  return (
    <div className="loginPage">
      <NavBarAgain title={"登录/注册"}></NavBarAgain>
      {/* 表单 */}
      <Form
        layout="horizontal"
        mode="card"
        form={formIns}
        footer={
          <Button
            block
            type="submit"
            color="primary"
            size="large"
            onClick={submit}
          >
            提交
          </Button>
        }
      >
        <Form.Item
          name="phone"
          label="手机号"
          rules={[
            { required: true, message: "请输入手机号" },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: "手机号格式错误",
            },
          ]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          name="code"
          label="验证码"
          extra={
            <Button type="primary" onClick={sendPhoneCode}>
              发送验证码
            </Button>
          }
          rules={[
            { required: true, message: "请输入验证码" },
            {
              pattern: /^\d{6}$/,
              message: "验证码格式错误",
            },
          ]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
      </Form>
    </div>
  );
};
export default Login;
